<template>
  <div>
    <div ref="map" class="longxi">
    陇西县地图
    </div>
    <!-- <img src="/map/1.png" alt=""> -->
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getGeo} from '@/api/areaSystem/geo'
export default {
  name:'box-card-map-analysis1',
  data(){
      return{
          myChart:null
      }
  },
  mounted(){
    this.myChart=echarts.init(this.$refs.map)   // 初始化 echarts 地图引擎

    this.myChart.showLoading('default', {
        text: '统计中，请稍候...',
        maskColor: '#2957A2',
        textColor: '#fff',
    });
    setTimeout(() => {
        this.makeData()             // 延时1 秒 地图数据渲染
    }, 1000);
  },
  created(){
    this.makeGeo()  //请求经纬度数据
  },
  methods:{
    makeGeo(){
      getGeo().then(response=>{
        echarts.registerMap('bd',response)
        this.myChart.hideLoading()
      })
    },
    // 陇西县地图deom
    // https://www.makeapie.com/editor.html?c=xu73dySMHt
    makeData(){
      var domImg = document.createElement('img');
      domImg.style.height = domImg.height = domImg.width = domImg.style.width = '8px';
      //   方块背景
      domImg.src ='';

      var domImgHover = document.createElement('img');
      domImgHover.style.height = domImgHover.height = domImgHover.width = domImgHover.style.width = '8px';
      domImgHover.src ='';
      
      var addr1="image:///map/1.png"
      var addr2="image:///map/2.png"
      var addr3="image:///map/3.png"
      var img2 = 'image:///map/react.png';
      var mapDate = [
          {
              name: '陇西县阳泉镇医院',
              value: [104.809556,35.153159],    //第一个数大了右边走  第二个数字大了往上走
              datas: 134,
              img: addr2,
          },
          {
              name: '陇西县大山镇医院',
              value: [104.649556,35.153159],
              datas: 134,
              img: addr2,
          },
          {
              name: '陇西县中西医结合医院',
              value: [104.649556,35.013715],
              datas: 1354,
              img: addr1,
          },
          {
              name: '陇西县中医医院',
              value: [104.764017,34.953159],
              datas: 1402,
              img: addr2,
          },
          {
              name: '天誉医院',
              value: [104.484017,34.953159],
              datas: 2468,
              img: addr3,
          },
          {
              name: '陇西县妇幼保健院',
              value: [104.484017,35.053159],
              datas: 768,
              img: addr1,
          },
          {
              name: '香泉镇卫生院',
              value: [104.484017,35.153159],
              datas: 589,
              img: addr3,
          },
          {
              name: '陇西县第一人民医院',
              value: [104.694017,35.253159],
              datas: 1500,
              img: addr1,
          },          
          {
              name: '陇西县高峰乡政府',
              value: [104.544017,35.203159],
              datas: 1500,
              img: addr2,
          },
      ];
      
      let option={
            backgroundColor: '',
            title: {
                top: 10,
                text: '陇西县医院地图',
                subtext: '',
                x: 'center',
                textStyle: {
                    color: '#fff',
                    fontWeight: 100,
                    fontSize: 14,
                },
            },
            geo: {
                map: 'bd',
                aspectScale: 0.75,      //这个数字大了，打点变宽
                layoutCenter: ['50%', '50.5%'],         // 这个数字是打点的地图中心点
                layoutSize: '100%',       // 这个数字大了打点变稀疏
                silent: true,
                roam: false,
                z: 0,
                itemStyle: {
                    normal: {
                        areaColor: 'rgba(0, 15, 40, 0.5)',
                        shadowColor: 'rgba(0, 0, 0, 1)',
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowOffsetY: 5,
                        borderColor: 'rgba(0, 0, 0, 0.7)',
                        borderWidth: 0.5,
                    },
                    emphasis: {
                        areaColor: '#2AB8FF',
                        borderWidth: 1,
                        color: 'green',
                        label: {
                            show: false,
                        },
                    },
                },
            },
            series: [
                {
                    type: 'map',
                    roam: true,
                    label: {
                        normal: {
                            show: false,
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        emphasis: {
                            textStyle: {
                                color: '#fff',
                            },
                        },
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#2ab8ff',
                            borderWidth: 1,
                            areaColor: {
                                image: domImg,
                                repeat: 'repeat',
                            },
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowOffsetY: 1,
                        },
                        emphasis: {
                            areaColor: {
                                image: domImgHover,
                                repeat: 'repeat',
                            },
                            borderColor: '#2ab8ff',
                            borderWidth: 1,
                            shadowColor: 'rgba(0, 255, 255, 0.7)',
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 1,
                            label: {
                                show: false,
                            },
                        },
                    },
                    zoom: 1.1,
                    aspectScale: 0.99,
                    roam: false,
                    map: 'bd',
                },
                {
                    tooltip: {
                        show: false,
                    },
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        scale: 10,
                        brushType: 'stroke',
                    },
                    showEffectOn: 'render',
                    itemStyle: {
                        normal: {
                            shadowColor: '#0ff',
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            color: function (params) {
                                var colorList = [
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#64fbc5',
                                        },
                                        {
                                            offset: 1,
                                            color: '#018ace',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#64fbc5',
                                        },
                                        {
                                            offset: 1,
                                            color: '#018ace',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#168e6d',
                                        },
                                        {
                                            offset: 1,
                                            color: '#c78d7b',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#61c0f1',
                                        },
                                        {
                                            offset: 1,
                                            color: '#6f2eb6',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#168e6d',
                                        },
                                        {
                                            offset: 1,
                                            color: '#c78d7b',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#61c0f1',
                                        },
                                        {
                                            offset: 1,
                                            color: '#6f2eb6',
                                        },
                                    ]),
                                ];
                                return colorList[params.dataIndex];
                            },
                        },
                    },
                    label: {
                        normal: {
                            color: '#fff',
                        },
                    },
                    symbol: 'circle',
                    symbolSize: [10, 5],        //这个是椭圆
                    data: mapDate,
                    zlevel: 1,
                },
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    itemStyle: {
                        color: '#f00',
                    },
                    symbol: function (value, params) {
                        return params.data.img;
                    },
                    symbolSize: [32, 41],
                    symbolOffset: [0, -20],
                    z: 9999,
                    data: mapDate,
                },
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                var name = params.name;
                                var value = params.data.datas;
                                var text = `{fline|${value}}\n{tline|${name}}`;
                                return text;
                            },
                            color: '#fff',
                            rich: {
                                fline: {
                                    padding: [0, 25],
                                    color: '#fff',
                                    textShadowColor: '#030615',
                                    textShadowBlur: '0',
                                    textShadowOffsetX: 1,
                                    textShadowOffsetY: 1,
                                    fontSize: 12,
                                    fontWeight: 400,
                                },
                                tline: {
                                    padding: [0, 27],
                                    color: '#ABF8FF',
                                    fontSize: 10,
                                },
                            },
                        },
                        emphasis: {
                            show: true,
                        },
                    },
                    itemStyle: {
                        color: '#00FFF6',
                    },
                    symbol: img2,
                    symbolSize: [100, 50],
                    symbolOffset: [0, -60],
                    z: 999,
                    data: mapDate,
                },
            ],
        };
      this.makeGraph(option)
    },
    makeGraph(option){      
      this.myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.longxi{
  width: 100%;
  height:calc( (100vh - 1.23rem) * 2 / 3 );
}
</style>